import XtxConfirm from "@/components/library/XtxConfirm";
import { createVNode, render } from "vue";

// 创建元素
const container = document.createElement("div");
// 将元素添加到页面中
document.body.appendChild(container);
export default function Confirm({ title, content }) {
  return new Promise(function (resolve, reject) {
    const onCancelButtonClickHandler = () => {
      // 关闭确认框
      // render(null, container);
      // promise 失败
      reject();
      vNode.el.classList.remove("fade");
      vNode.el.children[0].classList.remove("fade");
      setTimeout(() => {
        // 如果其他的开发者传递了取消逻辑 执行取消逻辑
        render(null, container);
      }, 400);
    };
    const onSureButtonClickHandler = () => {
      render(null, container);
      // promise 成功
      resolve();
    };
    // 将组件转化为虚拟dom
    const vNode = createVNode(XtxConfirm, {
      title,
      content,
      onCancelButtonClick: onCancelButtonClickHandler,
      onSureButtonClick: onSureButtonClickHandler,
    });
    // 将dom渲染到元素中
    render(vNode, container);
    // 执行入场动画
    setTimeout(() => {
      vNode.el.classList.add("fade");
      vNode.el.children[0].classList.add("fade");
    }, 400);
  });
}
